<!--selectData :默认选中项-->
<!--singleChoice :是否单选 true是，false否-->
<!--ifUser :是否返回用户，true返回用户，false返回岗位-->
<!--setData :回调函数，如果singleChoice为true返回为对象，如果是false，返回为数组-->
<!--setCurrentInfo :初始化函数，请在使用组件时调用-->
<!--rootOrgName 从该机构id -->


<template>
    <div>
        <Input suffix="ios-search"  v-if="!isButton" :placeholder="placeholderStr" :value="userName" readonly @on-focus="openOrgModal"/>
        <Modal v-model="modal" width="900" :mask-closable="false" title="用户列表" :footer-hide="singleChoice">
            <Form :label-width="100" ref="formInline" :model="formInline">
                <div v-if="switchFlag">
                    <Row :gutter="16" class="query-form2">
                        <i-col span="8">
                            <FormItem label="机构名称：">
                                <Input class="query-form-el" v-model="formInline.orgName"></Input>
                            </FormItem>
                        </i-col>
                        <i-col span="8">
                            <FormItem label="用户名称：">
                                <Input class="query-form-el" v-model="formInline.userName"></Input>
                            </FormItem>
                        </i-col>
                        <i-col span="8">
                            <FormItem label="岗位名称：">
                                <Input class="query-form-el" v-model="formInline.positionName"></Input>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row :gutter="16" class="query-form2">
                        <i-col span="24">
                            <div style="float: right;">
                                <Button class="ivu-btn-query" icon="md-search"  @click="query">查询</Button>
                                <Button class="ivu-btn-reset" style="margin-left: 10px" @click="reset">重置</Button>
                                <Button @click="switchQuery(false)" style="margin-left: 10px" class="ivu-btn-switch2" type="text" >收起<Icon type="ios-arrow-up" /></Button>
                            </div>
                        </i-col>
                    </Row>
                </div>
                <div v-else>
                    <Row :gutter="16" class="query-form2">
                        <i-col span="8">
                            <FormItem label="机构名称：">
                                <Input class="query-form-el" v-model="formInline.orgName"></Input>
                            </FormItem>
                        </i-col>
                        <i-col span="8">
                            <FormItem label="用户名称：">
                                <Input class="query-form-el" v-model="formInline.userName"></Input>
                            </FormItem>
                        </i-col>
                        <i-col span="8">
                            <div style="float: right;">
                                <Button class="ivu-btn-query" icon="md-search"  @click="query">查询</Button>
                                <Button class="ivu-btn-reset" style="margin-left: 10px" @click="reset">重置</Button>
                                <Button @click="switchQuery(true)" style="margin-left: 5px" class="ivu-btn-switch2" type="text" >展开<Icon type="ios-arrow-down"/></Button>
                            </div>
                        </i-col>
                    </Row>
                </div>
            </Form>
            <Table ref='table2' height="400" :loading="loading" no-data-text="请选择查询条件!" border :height="tableHeight"
                   :columns="column"  width="100%" :data="infos" size="small"></Table>
            <Row type="flex" justify="end" >
                <i-col>
                    <Page :total="pagedata.total" :current="pagedata.currentPage" :page-size="pagedata.pageSize"
                          @on-page-size-change="pageSizeChange" @on-change="pageChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
                </i-col>
            </Row>

            <Form :label-width="100" v-if="!singleChoice">
                <Row style="margin-top: 10px;">
                    <i-col span="24">
                        <FormItem :label="labelName">
                            <TagInput ref="refTagInput" :tags="selectUsers"/>
                        </FormItem>
                    </i-col>
                </Row>
            </Form>
            <div slot="footer">
                <Button class="ivu-btn-save" @click="saveInfo">确定</Button>
            </div>
        </Modal>

        <Modal v-model="modal1" width="1300">
            <Row :gutter="16">
                <i-col span="14">
                    <Form :label-width="100" ref="formInline" :model="formInline">
                        <div v-if="switchFlag">
                            <Row :gutter="16" class="query-form2">
                                <i-col span="8">
                                    <FormItem label="机构名称：">
                                        <Input class="query-form-el" v-model="formInline.orgName"></Input>
                                    </FormItem>
                                </i-col>
                                <i-col span="8">
                                    <FormItem label="用户名称：">
                                        <Input class="query-form-el" v-model="formInline.userName"></Input>
                                    </FormItem>
                                </i-col>
                                <i-col span="8">
                                    <FormItem label="岗位名称：">
                                        <Input class="query-form-el" v-model="formInline.positionName"></Input>
                                    </FormItem>
                                </i-col>
                            </Row>
                            <Row :gutter="16" class="query-form2">
                                <i-col span="24">
                                    <div style="float: right;">
                                        <Button class="ivu-btn-query" icon="md-search"  @click="query">查询</Button>
                                        <Button class="ivu-btn-reset" style="margin-left: 10px" @click="reset">重置</Button>
                                        <Button @click="switchQuery(false)" style="margin-left: 10px" class="ivu-btn-switch2" type="text" >收起<Icon type="ios-arrow-up" /></Button>
                                    </div>
                                </i-col>
                            </Row>
                        </div>
                        <div v-else>
                            <Row :gutter="16" class="query-form2">
                                <i-col span="8">
                                    <FormItem label="机构名称：">
                                        <Input class="query-form-el" v-model="formInline.orgName"></Input>
                                    </FormItem>
                                </i-col>
                                <i-col span="8">
                                    <FormItem label="用户名称：">
                                        <Input class="query-form-el" v-model="formInline.userName"></Input>
                                    </FormItem>
                                </i-col>
                                <i-col span="8">
                                    <div style="float: right;">
                                        <Button class="ivu-btn-query" icon="md-search"  @click="query">查询</Button>
                                        <Button class="ivu-btn-reset" style="margin-left: 10px" @click="reset">重置</Button>
                                        <Button @click="switchQuery(true)" style="margin-left: 5px" class="ivu-btn-switch2" type="text" >展开<Icon type="ios-arrow-down"/></Button>
                                    </div>
                                </i-col>
                            </Row>
                        </div>
                    </Form>
                    <Table ref='table2' :loading="loading" no-data-text="请选择查询条件!" border :height="tableHeight"
                           :columns="column"  width="100%" :data="infos" size="small"></Table>
                    <Row type="flex" justify="end" >
                        <i-col>
                            <Page :total="pagedata.total" :current="pagedata.currentPage" :page-size="pagedata.pageSize"
                                  @on-page-size-change="pageSizeChange" @on-change="pageChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
                        </i-col>
                    </Row>
                </i-col>
                <i-col span="10">
                    <Divider plain orientation="left">已选择岗位</Divider>
                    <Table no-data-text="请选择岗位!" border :height="tableHeight"
                           :columns="column2"  width="80%" :data="infos2" size="small"></Table>
                </i-col>
            </Row>
            <div slot="footer">
                <Button class="ivu-btn-save" @click="saveInfo2">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import TagInput from "@/components/TagInput.vue"
import {sessionStorage} from '../common/cacheUtils.js';
import {Api} from '../api/index.js'

export default {
  name: "input-user",
  components: {
    TagInput
  },
  props: {
    isButton: {
      type: Boolean,
      default: false
    },
    selectData: null,
            singleChoice: {
                type: Boolean,
                default: true
            },
            ifUser: {
                type: Boolean,
                default: true
            },
            rootOrgName: null,
            placeholderStr: {
                type: String,
                default: '请选择用户'
            },
        },
        data(){
            return{
                loading: false,
                modal: false,
                modal1: false,
                formInline: {},
                switchFlag: false,
                userName: '',
                column: [
                    {
                        type: 'index',
                        title: '序号',
                        width: 80,
                        align: 'center',
                    },
                    {
                        minWidth: 100,
                        title: '用户名称',
                        key: 'userName',
                        align: 'center',
                    },
                    {
                        minWidth: 120,
                        title: '手机号',
                        key: 'mobileNumber',
                        align: 'center',
                    },
                    {
                        minWidth: 140,
                        title: '岗位名称',
                        key: 'positionName',
                        align: 'center',
                    },
                    {
                        minWidth: 180,
                        title: '二级集团',
                        key: 'twoLevelOrgName',
                        align: 'center',
                    },
                    {
                        minWidth: 180,
                        title: '所属公司',
                        key: 'companyName',
                        align: 'center',
                    },
                    {
                        minWidth: 180,
                        title: '所属部门',
                        key: 'orgName',
                        align: 'center',
                    },
                    {
                        title: '操作',
                        align: 'center',
                        key: 'view',
                        fixed: 'right',
                        minWidth: 80,
                        render: (h, params) => {
                            return h('div', [
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px'
                                    },
                                    on: {
                                        click: () => {
                                            if(this.ifUser){
                                                if(this.singleChoice){
                                                    this.$emit('setData', params.row);
                                                    this.userName = params.row.userName;
                                                    this.modal = false;
                                                }else{
                                                    this.addUser(params.row);
                                                }
                                            }else{
                                                let exist = false;
                                                if(this.infos2.length!= 0){
                                                    this.infos2.forEach(v => {
                                                        if (params.row.positionId == v.positionId) {
                                                            exist = true;
                                                        }
                                                    });
                                                }
                                                if(!exist) this.infos2.push(params.row);
                                            }
                                        }
                                    }
                                }, '选择')
                            ])
                        }
                    }
                ],
                infos: [],
                tableHeight: '',
                selectUsers: [],
                labelName: '',
                pagedata: {
                    total: 0,
                    pageSize: 10,
                    currentPage: 1
                },
                pageSizeArray: [10, 20, 50],
                column2: [
                    {
                        minWidth: 180,
                        title: '岗位名称',
                        key: 'positionName',
                        align: 'center',
                    },
                    {
                        minWidth: 140,
                        title: '用户名称',
                        key: 'userName',
                        align: 'center',
                    },
                    {
                        minWidth: 180,
                        title: '所属部门',
                        key: 'orgName',
                        align: 'center',
                    },
                    {
                        title: '操作',
                        align: 'center',
                        key: 'view',
                        fixed: 'right',
                        minWidth: 80,
                        render: (h, params) => {
                            return h('div', [
                                h('A', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                        color: 'red'
                                    },
                                    on: {
                                        click: () => {
                                            this.infos2.splice(params.index, 1)
                                        }
                                    }
                                }, '删除')
                            ])
                        }
                    }
                ],
                infos2: []
            }
        },
        mounted(){
            this.tableHeight = window.innerHeight- 300;
            this.labelName = this.ifUser? '已选择用户：': '已选择岗位：';
            this.createColumns();
        },
        watch: {
            'modal': function (qw,er) {
                if(!qw) {
                    // this.selectUsers = [];
                    this.infos = [];
                    this.formInline = {};
                }
            }
        },
        methods: {
            setCurrentInfo(){
                this.selectUsers = JSON.parse(JSON.stringify(this.selectData));
                let name = '';
                if(this.singleChoice){
                    if(JSON.stringify(this.selectUsers)!='{}'){
                        this.userName = this.selectUsers.name;
                    }
                }else{
                    this.selectUsers.forEach(v => {
                        name += v.name + ","
                    });
                    this.userName = name.substring(0,name.length-1);
                }
            },
            resetCurrentUser(){
                this.userName = '';
            },
            query(){
                let companyName = this.rootOrgName;
                if(companyName == null){
                    companyName = sessionStorage('userId').getObject('userId').companyName
                }
                let data = {
                    fromPage: this.pagedata.currentPage,
                    pageSize: this.pagedata.pageSize,
                };
                data.companyName = this.formInline.orgName != ''&& this.formInline.orgName != undefined ? this.formInline.orgName: companyName
                data = Object.assign(data, JSON.parse(JSON.stringify(this.formInline)));
                this.loading = true;
                this.$http.get(Api.queryUser, {
                    params: data
                }).then(res => {
                    res.data.data.map(i => {
                        i.orgName = i.orgInfo.orgName;
                        i.orgId = i.orgInfo.orgId;
                        if(i.position != null){
                            i.positionId = i.position.positionId
                            i.positionName = i.position.positionName
                        }
                    })
                    this.infos = res.data.data;
                    this.pagedata.total = res.data.total;
                    this.loading = false;
                }).catch(e => {
                    this.loading = false;
                    this.$Message.error('请求失败');
                })
            },
            pageSizeChange(pageSize){
                this.pagedata.pageSize = pageSize;
                this.query();
            },
            pageChange(pageNum){
                this.pagedata.currentPage = pageNum;
                this.query();
            },
            reset(){
                this.formInline = {};
                this.query();
            },
            openOrgModal(){
                this.tableHeight = window.innerHeight -(this.singleChoice? 300:400);
                if(this.ifUser){
                    this.modal = true;
                }else{
                    this.modal1 = true;
                }
                this.query();
            },
            switchQuery(flag){
                this.switchFlag = flag;
                if(this.switchFlag) {
                    this.tableHeight = this.tableHeight - 30;
                }else{
                    this.tableHeight = this.tableHeight + 30;
                }
            },
            addUser(row){
                let userInfo = {};
                if(this.ifUser){
                    userInfo = {name: row.userName, userId: row.userId};
                }else {
                    userInfo = {name: row.positionName, userId: row.positionId};
                }
                let exist = false;
                let userId = this.ifUser? row.userId: row.positionId;
                this.selectUsers.forEach(v => {
                    if (userId == v.userId) {
                        exist = true;
                    }
                });
                if (!exist) {
                    this.$nextTick(() => {
                        this.selectUsers.push(userInfo);
                    })
                }
            },
            saveInfo(){
                if(this.selectUsers!=undefined&&this.selectUsers.length!=0){
                    let name = '';
                    let data = [];
                    this.selectUsers.forEach(v => {
                      name += v.name + ',';
                      data.push(v.userId);
                    });
                    if (this.isButton) {
                        this.$emit('setData', this.selectUsers);
                    } else {
                      this.$emit('setData', data);
                      this.userName = name.substring(0, name.length - 1);
                    }
                    this.modal = false;
                }else {
                    this.$Message.error('请选择数据！');
                }
            },
            saveInfo2(){
                if(this.infos2!=undefined&&this.infos2.length!=0){
                    let name = ''
                    let data = [];
                    this.infos2.forEach(v => {
                        name += v.positionName +  ',';
                        data.push(v.positionId);
                    });
                    this.userName = name.substring(0, name.length -1);
                    this.$emit('setData', data);
                    this.modal1 = false;

                }else{
                    this.$Message.error('请选择数据！');
                }
            },
            createColumns(){
                if(!this.ifUser){
                    this.column = [
                        {
                            type: 'index',
                            title: '序号',
                            width: 80,
                            align: 'center',
                        },
                        {
                            minWidth: 140,
                            title: '岗位名称',
                            key: 'positionName',
                            align: 'center',
                        },
                        {
                          minWidth: 100,
                          title: '用户名称',
                          key: 'userName',
                          align: 'center',
                        },
                        {
                            minWidth: 180,
                            title: '二级集团',
                            key: 'twoLevelOrgName',
                            align: 'center',
                        },
                        {
                            minWidth: 180,
                            title: '所属公司',
                            key: 'companyName',
                            align: 'center',
                        },
                        {
                            minWidth: 180,
                            title: '所属部门',
                            key: 'orgName',
                            align: 'center',
                        },
                        {
                            title: '操作',
                            align: 'center',
                            key: 'view',
                            fixed: 'right',
                            minWidth: 80,
                            render: (h, params) => {
                                return h('div', [
                                    h('A', {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            fontSize: '14px'
                                        },
                                        on: {
                                            click: () => {
                                                if(this.ifUser){
                                                    if(this.singleChoice){
                                                        this.$emit('setData', params.row);
                                                        this.userName = params.row.userName;
                                                        this.modal = false;
                                                    }else{
                                                        this.addUser(params.row);
                                                    }
                                                }else{
                                                    let exist = false;
                                                    if(this.infos2.length!= 0){
                                                        this.infos2.forEach(v => {
                                                            if (params.row.positionId == v.positionId) {
                                                                exist = true;
                                                            }
                                                        });
                                                    }
                                                    if(!exist) this.infos2.push(params.row);
                                                }
                                            }
                                        }
                                    }, '选择')
                                ])
                            }
                        }
                    ]
                }
            }
        }
    }
</script>

<style scoped>

</style>
